<template>
	<view>
		<scroll-view class="list" scroll-y @scrolltolower="loadMore">
			<view class="author-item-wrapper">
				<view class="author-item-image-wrapper">
					<image class="head-image" style="width: 140upx;height: 140upx; border-radius: 70upx;" :src="resourceHostPic + author.authorPic"></image> 
					<image v-if="author.isAuthenticated=='Y'" class="author-head-v" style="width:36upx;height:36upx;" src="../../static/img/icon_v_small.png"></image>
				</view>
				<view class="author-item-text-wrapper">
					<block v-if='author.authorName && author.authorName.length > 0'>
						<text  class="author-item-name">{{author.authorName}}</text>
					</block>
					<block v-if='author.authenticationInfo && author.authenticationInfo.length > 0'>
						<text  class="author-item-flag">{{author.authenticationInfo}}</text>
					</block>
				</view>
			</view>
			
			<view class="article-count-wrapper">
				<text  class="article-count-flag">文章</text>
				<text  class="article-count-number">( {{author.articleCount}} )</text>
			</view>
			
		    <block v-for="(article,index2) in articleList" :key="index2">
		        <article-item class="media-list" :article="article" :resourceHostPic="resourceHostPic" @close="close(index1,index2)" @goDetail="goDetail(article)">
				</article-item>
				<view class="media-list-bottom-blank"></view>
		    </block>
			
			<view class="uni-tab-bar-loading">
				<uni-load-more :loadingType="loadingType" :contentText="loadingText"></uni-load-more>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import articleItem from '@/components/articleItem.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import api from '../../common/api.js';
	var host = api.getHost;
	var resource = api.getResource;
	var author_list_api = api.authorList;
	var authorID;
	let pageNum = 1;
	let pageSize = 10;
	export default {
		components: {
			articleItem,
			uniLoadMore,
		},
		data() {
			return {
				resourceHostPic: '',
				loadingText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				loadingType: 0,
				hasNextPage: false,
				author:{},
				articleList:[],
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.resourceHostPic = resource;
			authorID = option.data;
			pageNum = 1;
			console.log("authorID=" + authorID); //打印出上个页面传递的参数。
			this.getAuthorList(authorID)
		},
		onUnload: function () {  
			console.log("pageNum=" + pageNum); //打印出上个页面传递的参数。
		},
		methods: {
			getAuthorList(){
				if(pageNum === 1){
					uni.showLoading({
						title: '加载中'
					});
				}
				let url = host + author_list_api;
				let that = this;
				uni.request({
					url: url,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						authorID: authorID,
						customerID: '-1',
						pageNum: pageNum,
						pageSize: pageSize
					},
					success: (res) => {
						if(pageNum == 1){
							that.author = res.data.data.author;
							that.articleList = res.data.data.articles;
						}else{
							that.articleList = that.articleList.concat(res.data.data.articles)
						}
						if('N' == res.data.data.hasNextPage){
							that.loadingType = 2
						} else if('Y' == res.data.data.hasNextPage){
							that.loadingType = 0
						} else {
							that.loadingType = 0
						}
						that.hasNextPage = res.data.data.hasNextPage;
						
						pageNum++;
						//console.log('getAuthorList success data=' + JSON.stringify(res.data));
						//console.log('that.author=' + that.author.authorName + ' ' + that.author.authorPic)
						console.log('getAuthorList success articleCount=' + res.data.data.author.articleCount + ' articles=' + res.data.data.articles.length + ' hasNextPage=' + res.data.data.hasNextPage);
					},
					fail: (res) => {
						console.log('getAuthorList fail data=' + JSON.stringify(res.data));
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			loadMore(e) {
				console.log('loadMore this.hasNextPage=' + this.hasNextPage);
				if('Y' == this.hasNextPage){
					this.loadingType = 1;
					setTimeout(() => {
						this.getAuthorList();
					}, 500);
				} 
			},
			goDetail(e) {
				console.log('goDetail e=' + JSON.stringify(e));
				uni.navigateTo({
			        url: '/pages/detail/detail?data='+e.articleID
			    })
			},
		},
		
	}
</script>

<style>
	 
	.list{
		/* background-color: white; */
	}
	.author-item-wrapper{
		width: 750upx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 50upx;
		padding-bottom: 50upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		background-color: white;
	}
	.author-item-image-wrapper{
		justify-content: flex-start;
		align-items: center;
		width: 150upx;
		height: 150upx;
		position: relative;
	}
	.head-image{
		position: absolute;
	}
	.author-head-v{
		position: absolute;
		right: 10upx;
		bottom: 10upx;
	}
	/* .author-item-v-wrapper{
		position: absolute;
		right: 0upx;
		bottom: 0upx;
	}
	.v-image{
		background-image: url('~@/static/img/icon_v_small.png');
	} */
	.author-item-text-wrapper{
		width: 580upx;
		height: 140upx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		margin-left: 30upx;
		margin-right: 20upx;
	}
	.author-item-name{
		font-size: 28upx;
		color: #333;
	}
	.author-item-flag{
		font-size: 28upx;
		color: #999;
	}
	.author-item-time{
		font-size: 28upx;
		color: #999;
	}
	.author-item-content{
		font-size: 28upx;
		color: #333;
		padding-bottom: 20upx;
	}
	
	.article-count-wrapper{
		width: 750upx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 0upx;
		padding-bottom: 30upx;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		background-color: white;
	}
	.article-count-flag{
		font-size: 32upx;
		color: #999;
	}
	.article-count-number{
		padding-left: 15upx;
		font-size: 28upx;
		color: #999;
	}
	
	.media-list-bottom-blank{
		width: 750upx;
		height: 25upx;
		background-color: #f5f5f5 ;
	}
</style>
